<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->
  <template>
  <div class="mySet_box">
    <div class="mySet_center_box" :class="{ Filter: isFilter}">
      <div class="mySet_title">
        <div class="mySet_title_return" @click="returnHistiy">
          <img src="@/assets/img/Back@3x.png" alt>
          <span>我的</span>
        </div>
        <p>设置</p>
      </div>
      <div class="mySet_item_box">
        <div class="mySet_item" @click="cacheGo">
          <span>清除缓存</span>
          <img src="@/assets/img/More2@3x.png" alt>
          <p>345Mb</p>
        </div>
        <div class="mySet_item" @click="update">
          <span>软件更新</span>
          <img src="@/assets/img/More2@3x.png" alt>
          <p>1.11</p>
        </div>
        <div class="mySet_item" @click="regards">
          <span>关于</span>
          <img src="@/assets/img/More2@3x.png" alt>
        </div>
      </div>
      <div class="mySet_quit">
        <x-button type="primary" @click.native="quitLogin" class="submit">退出登录</x-button>
      </div>
    </div>
    <div v-if="cacheBox" class="cache_popout" ref="cachePopout">
      <div class="cache_popout_info">
        <span>提示</span>
        <p>根据缓存文件大小，将会消耗不定</p>
        <P>时间清除文件。</P>
        <div class="btn">
          <em @click="cancelCache">取消</em>
          <em @click="requestCache">确定</em>
        </div>
      </div>
    </div>

    <div v-if="upDateBox" class="cache_popout" ref="cachePopout">
      <div class="cache_popout_info">
        <span>软件更新</span>
        <p>&nbsp;</p>
        <p>{{upDateTitle}}</p>

        <div class="btn" :class="{upDataStyle:upDataStyle}">
          <em @click="upDateCache">取消</em>
          <em @click="updateStart">确定</em>

          <i class="unable" v-if="upDataInstallStyle == ''">请稍等</i>
          <i v-else-if="upDataInstallStyle == 'install'" @click="updateInstall">确定</i>
          <i v-else-if="upDataInstallStyle == 'Ok'" @click="updateOk">确定</i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { XButton } from "vux";
export default {
  components: {
    XButton
  },
  data() {
    return {
      isFilter: false,
      cacheBox: false,
      upDateBox: false,
      upDateTitle: "检查是否有版本更新",
      upDataStyle: false,
      upDataInstallStyle: ""
    };
  },
  methods: {
    // 清除缓存
    cacheGo() {
      this.isFilter = true;
      this.cacheBox = true;
    },
    // 软件更新
    update() {
      this.upDateTitle = "检查是否有版本更新";
      this.upDataStyle = false;
      this.isFilter = true;
      this.upDateBox = true;
    },
    // 取消更新
    upDateCache() {
      this.isFilter = false;
      this.upDateBox = false;
    },
    // 确定更新
    updateStart() {
      this.upDateTitle = "检查到更新 正在下载 ...";
      this.upDataStyle = true;
      chcp.fetchUpdate(this.fetchUpdateCallback);
    },
    // 下载返回数据
    fetchUpdateCallback(error, data) {
      if (error) {
        this.upDateTitle = "没有版本更新";
        setTimeout(() => {
          this.isFilter = false; //关闭背景
          this.upDateBox = false; //关闭弹框
        }, 2000);
        console.log(error.description);
        return;
      }
      if (data) {
        this.upDateTitle = "下载完成 请进行安装";
        this.upDataInstallStyle = "install";
      }
    },
    // 点击安装
    updateInstall() {
      this.upDateTitle = "正在安装 ...";
      setTimeout(() => {
        this.upDataInstallStyle = "";
        chcp.installUpdate(this.installationCallback);
      }, 1000);
    },

    // 安装过程
    installationCallback(error) {
      if (error) {
        console.log(
          "Failed to install the update with error code: " + error.code
        );
        console.log(error.description);
      } else {
        setTimeout(() => {
          this.upDateTitle = "安装完成 " + "请登录";
          this.upDataInstallStyle = "Ok";
          console.log("Update installed!");
        }, 1000);
      }
    },
    updateOk() {
      this.isFilter = false;
      this.upDateBox = false;
    },
    cancelCache() {
      this.isFilter = false;
      this.cacheBox = false;
    },
    requestCache() {
      this.isFilter = false;
      this.cacheBox = false;
    },
    quitLogin() {
      localStorage.removeItem("AUTH-TOKEN");
      this.$router.push({
        path: "/"
      });
    },
    returnHistiy() {
      this.$router.isBack = true;
      this.$router.goBack();
    },
    regards() {
      this.$router.push({
        path: "/my/myRegards"
      });
    }
  }
};
</script>

<style scoped lang="less">
// 清除缓存框背景

.mySet_box {
  position: fixed;
  top: 0rem;
  bottom: 0.55rem;
  width: 100%;
  z-index: 200;
  height: 100%;
  overflow: hidden;
  background: #fbf9fe;
  .mySet_center_box {
    .mySet_title {
      width: 100%;
      height: 0.44rem;
      text-align: center;
      line-height: 0.44rem;
      background: #ffffff;
      box-shadow: inset 0 -1px 0 0 rgba(207, 207, 207, 0.2);
      .mySet_title_return {
        margin-top: -0.04rem;
        float: left;
        img {
          // width: 0.15rem;
          height: 0.205rem;
          padding-left: 0.085rem;
        }
        span {
          font-family: Regular;
          font-size: 0.17rem;
          color: #3e3e3e;
          letter-spacing: -0.41px;
          line-height: 0.22rem;
        }
      }
      p {
        font-family: Semibold;
        font-size: 0.17rem;
        color: #3e3e3e;
        letter-spacing: -0.41px;
        text-align: center;
        height: 0.44rem;
        line-height: 0.44rem;
        margin-left: 0.7rem;
        margin-right: 0.7rem;
      }
    }
    .mySet_item_box {
      margin-top: 0.2rem;
      background: #ffffff;
      .mySet_item {
        overflow: hidden;
        clear: both;
        margin-left: 0.24rem;
        height: 0.3rem;
        padding-top: 0.14rem;
        border-bottom: 1px rgba(207, 207, 207, 0.2) solid;
        span {
          float: left;
          font-family: Regular;
          font-size: 0.15rem;
          color: #888888;
          letter-spacing: -0.36px;
          line-height: 0.2rem;
        }
        p {
          float: right;
          font-family: HelveticaNeue;
          font-size: 0.15rem;
          color: #212121;
          letter-spacing: -0.36px;
          text-align: right;
          line-height: 0.16rem;
          margin-right: 0.1rem;
        }
        img {
          float: right;
          height: 0.16rem;
          margin-right: 0.15rem;
        }
      }
    }
    .mySet_quit {
      margin: 0.64rem 0.24rem 0 0.24rem;
      .submit {
        height: 0.44rem;background: #BE9457;
        border-radius: 0rem;
        font-family: Regular;
        font-size: 0.15rem;
        color: #ffffff;
        letter-spacing: -0.36px;
      }
    }
  }
  .Filter {
    filter: blur(12px);
    background: rgba(0, 0, 0, 0.08);
  }
  //清除缓存弹窗
  .cache_popout {
    z-index: 9;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background: rgba(255, 255, 255, 0.7);
    position: fixed !important; /* 浮动对话框 */
    position: absolute;
    top: 0%;
    left: 0%;
    display: block;
    .cache_popout_info {
      border-radius: 0.05rem;
      height: 1.4rem;
      width: 2.7rem;
      position: fixed !important; /* 浮动对话框 */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 5;
      border-radius: 0.05rem;
      font-size: 0.17rem;
      line-height: 0.2rem;
      color: #414244;
      letter-spacing: 0;
      background: rgba(248, 248, 248, 1);
      border-radius: 0.14rem;
      overflow: hidden;
      span {
        font-family: Semibold;
        display: block;
        font-weight: 700;
        margin-top: 0.19rem;
        font-size: 0.17rem;
        color: #000000;
        letter-spacing: -0.41px;
        text-align: center;
        line-height: 0.22rem;
      }
      p {
        display: block;
        font-size: 0.13rem;
        color: #000000;
        letter-spacing: -0.08px;
        text-align: center;
        line-height: 0.18rem;
        font-family: Regular;
      }
      .btn::before {
        background: #3f3f3f;
        background: rgba(0, 0, 80, 0.05);
        height: 1px;
        content: "";
        width: 100%;
        display: block;
      }
      .btn {
        font-family: Semibold;
        margin-top: 0.18rem;
        width: 100%;
        height: 0.43rem;
        line-height: 0.43rem;
        background-size: 100% 100%;
        font-size: 0.17rem;
        color: #d62f17;
        letter-spacing: -0.41px;
        text-align: center;
        font-weight: 700;
        em {
          width: 50%;
          float: left;
          height: 0.43rem;
          line-height: 0.43rem;
          padding-top: 0.1rem;
          font-family: Regular;
          font-size: 0.17rem;
          color: #0e0e0e;
          letter-spacing: -0.41px;
          text-align: center;
          line-height: 0.22rem;
          margin-right: -1px;

          color: #da371c;
        }
        i {
          display: none;
        }
        .unable {
          color: #969696;
        }
        em:nth-child(1) {
          border-right: 1px rgba(0, 0, 80, 0.05) solid;
          color: #0e0e0e;
        }
      }
      .upDataStyle {
        em {
          display: none;
        }
        i {
          width: 100%;
          height: 0.43rem;
          line-height: 0.43rem;
          padding-top: 0.1rem;
          font-family: Regular;
          font-size: 0.17rem;
          color: #da371c;
          letter-spacing: -0.41px;
          text-align: center;
          line-height: 0.22rem;
          margin-right: -1px;
          display: block;
        }
      }
    }
  }
}
</style>